<template>
  <!-- <h1>管理教师</h1> -->
  <el-button type="primary" size="mini" @click="dialogFormVisible = true"
    >增加</el-button
  >
  <el-dialog v-model="dialogFormVisible" title="新增信息" @close="qingkong">
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item
        label="教师姓名"
        :label-width="formLabelWidth"
        prop="t_name"
      >
        <el-input v-model="form.t_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-radio-group v-model="form.t_sex">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="联系方式"
        :label-width="formLabelWidth"
        prop="t_lianxi"
      >
        <el-input
          v-model="form.t_lianxi"
          autocomplete="off"
          :maxlength="11"
        ></el-input>
      </el-form-item>
      <el-form-item label="年龄" :label-width="formLabelWidth" prop="t_age">
        <el-input v-model="form.t_age" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="教师编号"
        :label-width="formLabelWidth"
        prop="t_bianhao"
      >
        <el-input
          v-model="form.t_bianhao"
          autocomplete="off"
          :maxlength="6"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="zengjia('ruleForm')">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="xiugai" title="修改信息" @close="qingkong">
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item
        label="教师姓名"
        :label-width="formLabelWidth"
        prop="t_name"
      >
        <el-input v-model="form.t_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth">
        <el-radio-group v-model="form.t_sex">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="联系方式"
        :label-width="formLabelWidth"
        prop="t_lianxi"
      >
        <el-input
          v-model="form.t_lianxi"
          autocomplete="off"
          :maxlength="11"
        ></el-input>
      </el-form-item>
      <el-form-item label="年龄" :label-width="formLabelWidth" prop="t_age">
        <el-input v-model="form.t_age" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="教师编号"
        :label-width="formLabelWidth"
        prop="t_bianhao"
      >
        <el-input
          v-model="form.t_bianhao"
          autocomplete="off"
          :maxlength="6"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="xiugai = false">取消</el-button>
        <el-button type="primary" @click="genggai('ruleForm')">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="chakan" title="教师详情" @close="closeDialog">
    <el-table :data="xiangqing">
      <el-table-column label="ID" prop="id" width="80"></el-table-column>
      <el-table-column
        label="教师姓名"
        prop="t_name"
        width="130"
      ></el-table-column>
      <el-table-column
        label="教师年龄"
        prop="t_age"
        width="100"
      ></el-table-column>
      <el-table-column
        label="教师性别"
        prop="t_sex"
        width="100"
      ></el-table-column>
      <el-table-column
        label="教师联系方式"
        prop="t_lianxi"
        width="150"
      ></el-table-column>
      <el-table-column
        label="教师编号"
        prop="t_bianhao"
        width="130"
      ></el-table-column>
      <el-table-column align="right"> </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="chakan = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
  <el-table
    :data="tableData.slice((currentPage4 - 1) * size, currentPage4 * size)"
  >
    <el-table-column label="ID" prop="id" width="180"></el-table-column>
    <el-table-column
      label="教师名称"
      prop="t_name"
      width="180"
    ></el-table-column>
    <el-table-column align="right">
      <template #header>
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入教师姓名关键字后单击回车搜索"
          @keyup.enter="mohuchaxun"
        />
      </template>
      <template #default="scope">
        <el-button size="mini" @click="(chakan = true), chaxunid(scope.row.id)"
          >查看</el-button
        >
        <el-button size="mini" type="primary" @click="gai(scope.row)"
          >修改</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="shanchu(scope.row.id, scope.row.t_bianhao)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <span class="demonstration"></span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 25]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
const axios = require("axios");
// import { defineComponent, reactive, toRefs, ref } from "vue";
export default {
  name: "GLbanji",
  data() {
    return {
      total: 0,
      size: 10,
      currentPage4: 1,
      tb: "",
      value1: "",
      value2: "",
      dialogFormVisible: false,
      chakan: false,
      xiugai: false,
      form: {
        t_name: "",
        t_sex: "",
        t_lianxi: "",
        t_age: "",
        t_bianhao: "",
        delivery: false,
      },
      formLabelWidth: "120px",
      rules: {
        t_name: [
          { required: true, message: "请输入教师姓名", trigger: "blur" },
          {
            min: 2,
            max: 9,
            message: "长度在 2 到 9 个字符",
            trigger: "blur",
          },
        ],
        t_lianxi: [
          { required: true, message: "请输入教师联系方式", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "长度是 11 个字符",
            trigger: "blur",
          },
        ],
        t_age: [
          { required: true, message: "请输入教师年龄", trigger: "blur" },
          {
            min: 2,
            max: 2,
            message: "长度是 2 个字符",
            trigger: "blur",
          },
        ],
        t_bianhao: [
          { required: true, message: "请输入教师编号", trigger: "blur" },
          {
            min: 6,
            max: 6,
            message: "长度是 6 个字符",
            trigger: "blur",
          },
        ],
      },
      tableData: [
        {
          id: "",
          k_name: "",
          t_bianhao: "",
          t_name: "",
        },
      ],
      xiangqing: [],
      search: "",
    };
  },
  methods: {
    handleSizeChange: function (size) {
      this.size = size;
    },
    handleCurrentChange: function (currentPage4) {
      this.currentPage4 = currentPage4;
    },
    gai(g) {
      this.xiugai = true;
      this.form = g;
    },
    //关闭弹框的事件
    closeDialog() {
      this.xiangqing = []; //清空数据
    },
    qingkong() {
      this.form = {
        t_name: "",
        t_sex: "",
        t_lianxi: "",
        t_age: "",
        t_bianhao: "",
      };
    },
    mohuchaxun() {
      let _this = this;
      axios
        .get("https://localhost:44391/api/guanliyuan/mohujiaoshi", {
          params: {
            mohu: _this.search,
          },
        })
        .then(function (response) {
          console.log(response);
          _this.tableData = response.data;
        });
    },
    shanchu(id, tbianhao) {
      let _this = this;
      axios
        .get("https://localhost:44391/api/guanliyuan/chaxunbanzhuren", {
          params: {
            tbianhao: tbianhao,
          },
        })
        .then(function (response) {
          console.log(response.data);
          if (response.data == "" || response.data == null) {
            axios
              .get("https://localhost:44391/api/guanliyuan/shanchujiaoshi", {
                params: {
                  id: id,
                },
              })
              .then(function (response) {
                console.log(response);
                if (response.data >= 1) {
                  _this.$notify({
                    title: "成功",
                    message: "删除成功",
                    type: "success",
                  });
                } else {
                  _this.$notify({
                    title: "警告",
                    message: "删除失败",
                    type: "warning",
                  });
                }
                _this.chaxun();
              });
          } else {
            _this.$notify({
              title: "警告",
              message: "删除失败,该教师下有所属班级!请先删除对应班级!",
              type: "warning",
            });
          }
        });
    },
    zengjia(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this;
          _this.form.t_age = parseInt(_this.form.t_age);
          console.log(this.form);
          debugger;
          axios
            .get("https://localhost:44391/api/zhuce/chaxunbianhao", {
              params: {
                t_bianhao: this.form.t_bianhao,
              },
            })
            .then(function (response) {
              debugger;
              console.log(response);
              if (response.data != "") {
                _this.$notify({
                  title: "警告",
                  message: "教师编号重复！请检查教师编号！",
                  type: "warning",
                });
              }
              if (response.data === "") {
                console.log(_this.form);
                debugger;
                //   _this.form.t_age = parseInt(_this.form.t_age);
                _this.doZengjia();
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    doZengjia() {
      let _this = this;
      console.log("123", this.form);
      axios
        .post(
          "https://localhost:44391/api/guanliyuan/xinzengjiaoshi",
          this.form
        )
        .then(function (response) {
          debugger;
          console.log(response);
          if (response.data >= 1) {
            _this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
            });
            _this.dialogFormVisible = false;
            _this.chaxun();
          } else {
            _this.$notify({
              title: "警告",
              message: "添加失败",
              type: "warning",
            });
          }
        });
    },
    genggai(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this;
          this.form.t_age = parseInt(this.form.t_age);
          console.log(this.form);
          axios
            .post(
              "https://localhost:44391/api/guanliyuan/xiugaijiaoshi",
              _this.form
            )
            .then(function (response) {
              console.log(response);
              if (response.data >= 1) {
                _this.$notify({
                  title: "成功",
                  message: "修改成功",
                  type: "success",
                });
                _this.xiugai = false;
                _this.chaxun();
              } else {
                _this.$notify({
                  title: "警告",
                  message: "修改失败",
                  type: "warning",
                });
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    chaxun() {
      let _this = this;
      console.log(_this.tb);
      if (_this.tb == "") {
        _this.$router.push({ path: "/" });
      } else {
        axios
          .get("https://localhost:44391/api/guanliyuan/chaxunjiaoshi")
          .then(function (response) {
            console.log(response.data);
            _this.tableData = response.data;
            _this.total = response.data.length;
          });
      }
    },
    chaxunid(id) {
      let _this = this;
      axios
        .get("https://localhost:44391/api/guanliyuan/teacherid", {
          params: {
            id: id,
          },
        })
        .then(function (chaxun) {
          console.log(chaxun.data);
          //   _this.xiangqing = chaxun.data;
          //将数据类型转换成数组，push到数组里
          _this.xiangqing.push(chaxun.data);
        });
    },
  },
  mounted() {
    this.tb = this.$store.state.t_bianhao;
    this.chaxun();
  },
};
</script>

<style scoped>
h1 {
  font-size: 40px;
}
</style>